<template>
    <el-dialog :visible="visible"
               title="Sparepart Item"
               :show-close="false"
               width="80%"
               top="0px"
    >
        <div class="search">
            <el-input v-model="key"
                      placeholder="Part No"
                      @change="search"
                      style="display: inline-block;width: 300px">
            </el-input>
            <el-input v-model="key1"
                      placeholder="Part Name"
                      @change="search"
                      style="display: inline-block;width: 300px">
            </el-input>
        </div>
        <el-popover
                ref="popover1"
                placement="top-start"
                title="Picked List"
                width="400"
                trigger="hover"
        >
            <el-table
                    :data="pickedList"
                    style="width: 100%">
                <el-table-column
                        prop="partsNumber"
                        label="Part No">
                </el-table-column>
                <el-table-column
                        prop="denomination"
                        label="Description">
                </el-table-column>
                <el-table-column
                        :label="$t('operate')"
                >
                    <template slot-scope="scope">
                        <el-button
                                type="text"
                                icon="el-icon-delete"
                                @click="deletePicked(scope.row)">{{$t('delete')}}</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="reference" style="float: right;">
                <el-badge  :value="pickedList.length">
                    <el-button style="font-size: 30px;" type="info" circle  icon="el-icon-shopping-cart-2"></el-button>
                </el-badge>
            </div>
        </el-popover>
        <el-table
                max-height="500"
                :data="partList"
                border
                row-key="partsId"
                stripe
                style="width: 100%">
            <el-table-column
                    prop="partsNumber"
                    label="Part No"
                    width="180"
            >
                <template slot-scope="part">
                    <el-popover title="Part Detail"
                                width="800"
                                placement="right"
                                trigger="hover"
                    >
                        <part-detail :partDetail="partDetail"/>
                        <span slot="reference" style="color:#406EFF" @mouseenter.stop="getPartDetail(part.row)">{{part.row.partsNumber}}</span>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                    prop="denomination"
                    label="Description"
            >
            </el-table-column>
            <el-table-column
                    prop="designation"
                    label="Description"
            >
            </el-table-column>
            <el-table-column
                    prop="systemName"
                    label="System"
            >
            </el-table-column>
            <el-table-column
                    prop="hostNumber"
                    label="For Unit"
            >
            </el-table-column>
            <el-table-column
                    v-if="urlAvailible('sale-price')"
                    prop="salesPrice"
                    label="Sale Price"
            >
            </el-table-column>
            <el-table-column label="operate">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-cart" @click="statusChange(scope.row)">{{$t('add')}}</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="page">
            <el-pagination background
                           :page-size="pageSize"
                           @current-change="changePage"
                           layout="prev, pager, next"
                           :total="total"></el-pagination>
        </div>

        <span slot="footer" class="dialog-footer">
                        <el-button @click="emit('close')">Cancel</el-button>
                        <el-button type="primary" @click="emit('add')">Add</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import partDetail from './partDetail'
    import mixins from '../../util/mixins'
    import authMixins from '../../util/authMixins'
    import {getFixedPricePartList, getInventoryList, getMaterialList} from "../../api";
    import {ERROR_OK} from "../../util/config";

    export default {
        name: "spare-part-item",
        mixins: [mixins, authMixins],
        data() {
            return {
                key: '',
                key1: '',
                category: '',
                pickedList: [],
                partDetail: {},
                imageList: [],
                id: '',
                typeList: []
            }
        },

        props: {
            visible: {
                type: Boolean,
                default: false
            },
            belongModule: {
                type: Number,
                default: 1
            },
            showAll: {
                type: Boolean,
                default: false
            }
        },
        created() {
            this.getPartList()
        },
        methods: {
            deletePicked(r){
                const idx = this.pickedList.find(item=>item.partsNumber === r.partsNumber)
                this.pickedList.splice(idx, 1)
            },
            search() {
                this.pageNum = 1
                this.getPartList()
                this.$forceUpdate()
            },
            changePage(page){
                this.pageNum = page
                this.getPartList()
                this.$nextTick(()=>{
                    this.$forceUpdate()
                })

            },
            async getPartList() {
                if (this.showAll) {
                    const {status, data} = await getFixedPricePartList({
                        pageNum: this.pageNum,
                        pageSize: 100,
                        partsNumber: this.key,
                        description: this.key1
                    })
                    if (status === ERROR_OK) {
                        this.partList = data.list;
                        this.total = data.total;
                    } else {
                        this.$message.error('No part ')
                    }
                } else {
                    const {status, data} = await getInventoryList({
                        belongModule: this.belongModule,
                        pageNum: this.pageNum,
                        pageSize: 100,
                        partsNumber: this.key,
                        denomination: this.key1,
                        enableOrNot:0 // 可用配件
                    });
                    if (status === ERROR_OK) {
                        this.partList = data.list;
                        this.total = data.total;
                    }
                }

            },
            async getList() {
                const {status, data} = await getMaterialList();
                if (status === ERROR_OK) {
                    this.typeList = data;
                } else {
                    this.$message.error('没有查询到相关信息')
                }
            },
            async getPartDetail(data) {
                this.partDetail = data;
            },
            clear() {
                this.imageList = [];
                this.partDetail = {}
            },
            statusChange(r) {
                this.push(r)
            },
            push(r){
                const target = this.pickedList.find(item=>item.partsNumber === r.partsNumber)
                if(!target) {
                    this.pickedList.push(r)
                }
            },
            emit(key) {
                if (key === 'close') {
                    this.$emit(key, false)
                } else {
                    const list = this.pickedList;
                    this.$emit(key, JSON.parse(JSON.stringify(list)))
                }
            },

        },
        watch: {
            visible() {
                this.pickedList = []
            },
        },
        components: {
            partDetail
        }
    }
</script>

<style scoped lang="scss">

</style>